<template>
    <div class="productSchedule-detail">
        <a-modal width="1100px" :visible="visible" title="生产进度详情" @cancel="closeModal"
            class="yuan-modal productSchedule-detail-modal" :dialog-style="{ top: '20px' }">
            <a-spin tip="Loading..." :spinning="formLoading">
                <a-form-model layout="inline" class="yuan-form" ref="form" :model="formData"
                    :label-col="{ style: { width: '100px' } }" :wrapper-col="{ style: { width: 'calc(100% - 120px)' } }">
                    <div class="form-panel">
                        <div class="form-panel-title">{{info.prodName}}</div>
                        <div class="form-panel-box">
                            <!-- <a-form-model-item label="生产任务编号">
                                <span class="yuan-form-show" style="width:100px">20241028003</span>
                            </a-form-model-item> -->
                            <a-form-model-item label="创建时间">
                                <span class="yuan-form-show" style="width:150px">{{info.productionDate}}</span>
                            </a-form-model-item>
                            <!-- <a-form-model-item label="预计完成时间">
                                <span class="yuan-form-show" style="width:150px">{{info.finishTime}}</span>
                            </a-form-model-item> -->
                        </div>

                    </div>
                    <div class="form-panel">
                        <div class="form-panel-title">
                            <span>生产进度</span>
                            <a-button type="primary" icon="bar-chart" style="float:right" @click="showDetailMap">按甘特图显示</a-button>
                        </div>
                        <div class="schedule-panel">
                            <div class="schedule-list">
                                <div class="s-l-left">
                                    <div class="status-btn complete-btn">{{info.planName}}</div>
                                    <div class="s-left-line"></div>
                                </div>
                                <div class="s-l-box">
                                    <div class="s-l-top">2024-09-09至2024-09-12</div>
                                    <div class="s-l-step">
                                        <template v-for="item in info.planProgressObj">
                                            <i class="step-ico iconfont">&#xeb08;</i>
                                            <div class="step-one">
                                                <div>{{item.progress}}</div>
                                                <div>2024-09-09至2024-09-12</div>
                                            </div>
                                            
                                        </template>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </a-form-model>
            </a-spin>
            <template slot="footer">
                <a-button @click="closeModal" type="primary">关闭</a-button>
            </template>
        </a-modal>
        <DetailMapVue :visible="detailMapVisible" @closeModal="() => detailMapVisible = false" :info="info"/>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Watch, Vue } from "vue-property-decorator";
import nextApi from "@/api/nextApi";
import DetailMapVue from "./detailMap.vue";
@Component({
    name: "Add",
    components: { DetailMapVue },
})
export default class extends Vue {
    @Prop({ default: false }) visible!: boolean;
    //@Prop({ default: "" }) infoId!: string;
    @Prop({ default: {} }) info!: any;
    @Watch("visible")
    visibleChange() {
        if (this.visible) {
            this.getDetail();
        }
    }
    formLoading = false;
    formData: any = {};
    resetForm() {
        this.formData = {};
    }
    async mounted() {
        this.resetForm();
    }
    closeModal() {
        this.resetForm();
        (this.$refs.form as any).resetFields();
        this.$emit("closeModal");
    }

    async getDetail() {
        this.formLoading = true;
        try {
            console.info(this.info);
        } finally {
            this.formLoading = false;
        }
    }
    detailMapVisible = false;
    showDetailMap() {
        this.detailMapVisible = true;
    }
}
</script>
<style lang="scss">
.productSchedule-detail-modal {
    .schedule-panel {
        border: solid 1px #d8d8d8;
        padding: 15px;
    }
    .s-l-left {
        margin-right: 15px;
        position: relative;
        z-index: 5;
        flex-shrink: 0;
    }
    .s-left-line {
        width: 1px;
        border-left: solid 1px #409eff;
        height: 150px;
        position: absolute;
        left: 50%;
        top: 35px;
        z-index: 1;
    }
    .schedule-list {
        display: flex;
        margin-bottom: 50px;
    }
    .schedule-list:last-child {
        margin-bottom: 0;
        .s-left-line {
            display: none;
        }
    }
    .s-l-box {
        flex-grow: 1;
        background-color: #fbfbfb;
        border: solid 1px #d8d8d8;
    }
    .status-btn {
        color: #409eff;
        border-radius: 100px;
        border: dashed 1px #409eff;
        font-size: 16px;
        padding: 5px 20px;
        background-color: #f0f8ff;
    }
    .complete-btn {
        background-color: #409eff;
        color: #fff;
    }

    .s-l-top {
        border-bottom: solid 1px #d8d8d8;
        padding: 10px 15px;
        font-size: 16px;
        color: #333;
    }
    .s-l-step {
        padding: 10px 15px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }
    .step-one {
        text-align: center;
        font-size: 14px;
        color: #000;
        line-height: 30px;
        flex-shrink: 0;
        margin-bottom: 30px;
    }
    .step-ico {
        color: #409eff;
        font-size: 24px;
        margin: 0 40px;
        display: inline-block;
    }
}
</style>
